<%--
  Created by IntelliJ IDEA.
  User: XMY
  Date: 2019-02-25
  Time: 9:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style type="text/css">
        *{
            padding: 0px;
            margin: 0px;
        }
        #header{
            height: 131px;
            width: 960px;
            margin: 0px auto;
        }
        #header img,#header span{
            padding-top: 50px;
        }
        #submit{
            margin-left: 148px;
        }
    </style>
</head>
<body style="background-color: #F5F5F5">
<div id="header">
    <img src="image/index.png" id="logo" style="float: left"/>
    <span style="color: gray;float: right;">${user.uname} &nbsp;&nbsp;&nbsp;<a href="" >退出</a></span>
</div>
<div class="panel panel-default" style="width: 960px;margin: 0px auto;height: 500px;">
    <div class="panel-body">
        <h3>修改密码</h3>
        <hr />
    </div>
    <div style="padding: 10px 10px 10px;">
        <form class="bs-example bs-example-form" role="form" action="userInfoServlet?method=updatePwd&id=${user.uid}" onsubmit="return check()">
            <div class="input-group">
                <span class="input-group-addon">原密码</span>
                <input type="text" class="form-control" placeholder="输入原密码" style="width: 328px;" name="">
            </div>
            <br>
            <div class="input-group">
                <span class="input-group-addon">新密码</span>
                <input type="password" class="form-control" placeholder="输入新密码" style="width: 328px;" id="newPwd">
                <span class="help-block">&nbsp;&nbsp;密码长度8~16位，数字、字母、字符至少包含两种</span>
            </div>
            <br>
            <div class="input-group">
                <span class="input-group-addon">确认新密码</span>
                <input type="password" class="form-control" placeholder="重复新密码" style="width: 300px;" id="rPwd">
                <span class="help-block"></span>
            </div>
            <br />
            <div class="input-group">
                <span class="input-group-addon">验证码</span>
                <input type="text" class="form-control" placeholder="输入验证码" style="width: 120px;" id="yzm" yzm="${sessionScope.checkcode_session}">
                &nbsp;
                <img id="imageCode" onclick="changeImage() "src="codeServlet">
            </div>
            <br>
            <input type="submit" value="提交" class="btn" id="submit" style="width: 100px">
        </form>
    </div>
</div>

<script type="text/javascript">
    function changeImage() {
        document.getElementById("imageCode").src="codeServlet?"+new Date().getTime();
    }

    function check(){
        if ($("#newPwd").val()==null){
            alert("原密码不能为空！")
            return false;
        }
        if ($("#newPwd").val()==null){
            alert("新密码不能为空！")
            return false;
        }
        if ($("#rPwd").val()==null){
            alert("请确认密码！")
            return false;
        }
        if ($("#yzm").val()==null){
            alert("请填写验证码！")
            return false;
        }
        if (regPwd==false){
            return false;
        }
        var regex = /^\w{8,16}$/;
        if (!regex.test($("#newPwd").val())){
            alert("密码长度8~16位，必须包含数字和字母！");
            return false;
        }
        var yzm = $("#yzm").attr("yzm");
        if ($("#yzm").val()!=yzm){
            alert("验证码输入错误！")
            return false;
        }
        return true;
    }

    var regPwd = $("#rPwd").blur(function () {
        var pwd = $("#newPwd").val();
        if (pwd!=$("#rPwd").val()){
            $(this).next().html("&nbsp;两次密码不一致！")
            return false;
        }
    })
</script>
</body>
</html>
